<script setup lang="ts">
import { ref } from 'vue'
import {getDeptsListApi, addDeptsApi, getDeptsDetailApi, updateDeptsApi} from '@/api/departments'
import type {DeptManager} from '@/types/departments'
// @ts-ignore
import type { FormInstance } from 'element-plus'
// @ts-ignore
import { ElMessage } from 'element-plus'


// 控制弹层显示隐藏
const dialogVisible = ref(false)
// 控制弹层标题
const title = ref('添加部门')


// 打开弹层
const openDialog = async(id: string, type: string) => {
  dialogVisible.value = true
  // 判断是添加还是编辑
  if (type === 'edit') {
    // 编辑 获取部门详情
   title.value = '编辑部门'
   const res = await getDeptsDetailApi(id)
   deptsForm.value = res.data
  } 
  else {
    // 添加
    title.value = '添加部门'
    deptsForm.value.pid = id
  }
}
// 关闭弹层
const closeDialog = () => {
  dialogVisible.value = false
  // 清空表单
  formRef.value?.resetFields()
  // 清空部门详情
  deptsForm.value = {
    code: '',
    introduce: '',
    manager: '',
    name: '',
    pid: '',
    id: '',
    createTime: ''
  }
}

// 创建表单实例
const formRef = ref<FormInstance>()
// 接收表单数据
const deptsForm = ref({
  code: '',
  introduce: '',
  manager: '',
  name: '',
  pid: '',
  id: '',
  createTime: ''
})

// 获取部门负责人列表
const deptsDetail = ref<DeptManager[]>([])
const getDeptsList = async () => {
  const res = await getDeptsListApi()
  deptsDetail.value = res.data
}

// 表单校验
const rules = {
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入部门编码', trigger: 'blur' },
    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
  ],
  manager: [
    { required: true, message: '请选择部门负责人', trigger: 'change' }
  ],
  introduce: [
    { required: true, message: '请输入部门介绍', trigger: 'blur' },
    { min: 1, max: 300, message: '长度在 1 到 300 个字符', trigger: 'blur' }
  ]
}

// 确定添加部门
// 更新数据
const emit = defineEmits<{
  (e: 'getDepts'): void
}>()
const submitDepts = async() => {
  // 表单校验
  await formRef.value?.validate()
  // 判断是添加还是编辑
  if (title.value === '添加部门') {
    // 添加
    // 发送请求
    await addDeptsApi(deptsForm.value)
    // 提示用户
    ElMessage.success('添加成功')
  }
  else {
    // 编辑
    // 发送请求
    await updateDeptsApi(deptsForm.value)
    // 提示用户
    ElMessage.success('更新成功')
  }
  // 关闭弹层
  closeDialog()
  // 重新拉取数据
  emit('getDepts')
}

// 对父组件暴露 open方法
defineExpose({openDialog, getDeptsList})

</script>

<template>
  <div class='add-dept'>
    <!-- 放置弹层组件 -->
    <el-dialog :title="title" v-model="dialogVisible" :close-on-click-modal="false" @close="closeDialog">
      <!-- 表单组件  el-form   label-width设置label的宽度   -->
      <!-- 匿名插槽 -->
      <el-form label-width="120px" ref="formRef" :model="deptsForm" :rules="rules">
        <el-form-item label="部门名称" prop="name">
          <el-input style="width:80%" placeholder="1-10个字符" v-model="deptsForm.name" />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input style="width:80%" placeholder="1-10个字符" v-model="deptsForm.code" />
        </el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <el-select style="width:80%" placeholder="请选择" v-model="deptsForm.manager">
            <el-option v-for="item in deptsDetail" :key="item.id" :label="item.username" :value="item.username" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" v-model="deptsForm.introduce" />
        </el-form-item>
      </el-form>
      <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
      <template #footer>
        <div>
          <el-button type="primary" @click="submitDepts">确定</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped></style>